import React, {Component} from 'react';
import { View, StyleSheet, FlatList, Dimensions } from 'react-native';


import MarketItem from './MarketItem';
import { ROUTERMAP } from '../util/constants';
import { IReduxMarketInfo, IReduxMarketItem, INavigation } from '../interface';
import { utilGetAmountToByCoinType, utilGetMarketInfoByCoinType } from '../util/marketUtil';
import MarketInfo from '../container/MarketInfo';

interface IProps {
    keyV: string,
    navigation: INavigation,
    data: Array<IReduxMarketItem>,
    height?: number, 
    marketInfo?: IReduxMarketInfo,
}

const {height: deviceHeight} = Dimensions.get('window');

export default class MarketItems extends Component<IProps, any> {
    constructor(props) {
        super(props);
        this.state = {
            selected: ''
        }
    }

    turnToPage = (pageName: string, params?: Object) => {
        this.props.navigation.navigate(pageName, params);
    };

    renderItem = ({ item, index }: {item: IReduxMarketItem, index: number}) => {
        let marketInfo = this.props.marketInfo;
        let amountTo = item.value;
        if (marketInfo) {
            amountTo =  utilGetAmountToByCoinType(marketInfo, item.type);
        }
        return (
            <MarketItem {...item} amountTo={amountTo} key={`marketIndex-${index}`} onPress={() => {
                this.turnToPage(ROUTERMAP.marketInfo, {
                    type: item.type,
                    value: item.value,
                    extent: item.extent,
                })
            }
            } />
        )
    }

    render() {
        const {keyV, marketInfo, height, data} = this.props;
        return (
            <View style={styles.container} key={keyV}>
                <FlatList
                    style={[{height: deviceHeight}, {height}]}
                    data = {data}
                    keyExtractor={(_, index) => {
                        return keyV + index}
                    }
                    renderItem={this.renderItem}
                />
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        display: 'flex',
        flexDirection: 'column',
    }
})